<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <script src="/layui/layui.js"></script>
  <script src="/js/jquery/jquery-3.5.1.js"></script>
  <script src="/js/book/book.js"></script>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/bookList.css">
  <link rel="stylesheet" href="/css/readBook.css">
  <link rel="stylesheet" href="/component/pear/css/pear.css" />
  <script src="/component/pear/pear.js"></script>
  <title>规则校验</title>
  <style>
    .layui-input-block{
      width: 60%;
    }
    .help_button{
      display: inline-block;
      line-height: 40px;
      cursor: pointer;
      padding-left: 5px;
}
</style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">url地址</label>
    <div class="layui-input-block">
      <input type="text" name="url"   lay-verify="required" lay-reqtext="url地址不能为空" placeholder="url地址" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">规则</label>
    <div class="layui-col-md6">
      <input type="text" name="rule" lay-verify="required" lay-reqtext="规则不能为空" placeholder="请输入规则"  class="layui-input">
    </div>
<!--    <div class="layui-form-mid">12位密码</div>-->
    <span class="icon pear-icon help_button" onclick="ruleHelp()"></span>
    <span style="padding-left: 30px;"><button type="submit" class="layui-btn" lay-submit="" lay-filter="checkRule">查询</button></span>
  </div>
</form>
<div class="layui-form-item" >
<label class="layui-form-label">采集数据</label>
</div>
<div class="checkRuleVal"></div>
<script>
  layui.use('form', function(){
    var form = layui.form;
    //监听提交
    form.on('submit(checkRule)', function(data){
      var rs = JSON.stringify(data.field)
      $.ajax({
        type:"put",
        url: "/BookAdmin/CheckRule",
        data:JSON.stringify(data.field),
        dataType:"json",
        contentType : "application/json; charset=utf-8",
        success: function(res){
         var ds =  res.data
          var ruleVal = "<div class='ruleVal'>" +ds.rule+ "</div>"

          $(".checkRuleVal").empty();

          $(".checkRuleVal").append(ruleVal);
        }
      });
      return false;
    });
  });
 function ruleHelp(){
   layer.open({
     type: 2,
     title: false,
     closeBtn: 0,
     shadeClose: true,
     area: ['600px', '400px'],
     skin: 'yourclass',
     content: '/alert/book/admin/ruleHelp'
   });
  }
</script>

</body>
</html>